<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 一,说一下浅拷贝和深拷贝
      let obj = {
        uname: "张三",
        arr: [1, 2, 3, 4, 5],
        say: {
          num: 10,
        },
      };
      let o = {};
      // 浅拷贝第1种:等号赋值
      // o = obj;
      // 浅拷贝第2种:for in遍历
      // for(let k in obj){
      //   o[k]=obj[k]
      // }
      // 浅拷贝第3种:Object.assign()
      // Object.assign(o,obj)

      // 深拷贝第1种
      function fun(o, obj) {
        for (let k in obj) {
          let timer = obj[k];
          if (timer instanceof Array) {
            o[k] = [];
            fun(o[k], timer);
          } else if (timer instanceof Object) {
            o[k] = {};
            fun(o[k], timer);
          }else{
            o[k]=timer
          }
        }
      }
      fun(o, obj);

      obj.arr[2] = 888;
      obj.say.num = 999;
      console.log(obj);
      console.log(o);
      // 浅拷贝:浅拷贝拷贝的是地址,如果修改旧数据的话,那么新数据也会跟着改变,浅拷贝的实现方法有:(等号赋值),(for in遍历),(Object.assign)
      // 深拷贝:深拷贝是自己开辟一个空间,然后再把值拷贝进来,这样修改旧数据的话新数据不会跟着改变:(使用递归)


      // 一,你在哪里使用到了浅拷贝和深拷贝
      // 我在做二级联动的时候,后端给我们返回来的是一个字符串,所以我需要它转为一个数组放入二级联动里面,因为提交数据的时候后端需要的是一个字符串,我就把二级联动的数组又转回了字符串来提交数据,但是这个时候二级联动报错了,因为它需要一个数组,但是我给它传递了一个字符串,所以我把把需要提交的数据深拷贝了一份传递给后端,这样二级联动就使用的是旧数据,被改为字符串的那个数据是拷贝后的新数据,这样就不会发生冲突
    </script>
  </body>
</html>
